import { useHistory } from '@antv/xflow';
import { Tooltip } from 'antd';

import CenterIcon from '@/assets/icons/center.svg';
import ClearIcon from '@/assets/icons/clear.svg';
import RedoIcon from '@/assets/icons/redo.svg';
import UndoIcon from '@/assets/icons/undo.svg';
import ZoomIcon from '@/assets/icons/zoom.svg';
import ZoomOutIcon from '@/assets/icons/zoom-out.svg';
import { colors } from '@/config/theme';
import { useGraph } from '@/hooks/useGraph';

export const Tools = memo(() => {
  const { graph, saveGraph } = useGraph();
  const { undo, redo, canUndo, canRedo } = useHistory();

  return (
    <div className="flex gap-16 items-center flow-tools">
      <span className="text-label-14">工具</span>

      <Tooltip title="缩小">
        <div>
          <ZoomOutIcon
            onClick={() => {
              graph?.zoom(-0.2);
              graph?.centerContent();
            }}
            className="outline-none cursor-pointer"
            width={16}
            height={16}
            fill={colors.gray[500]}
            name="zoom-out"
          />
        </div>
      </Tooltip>

      <Tooltip title="放大">
        <div>
          <ZoomIcon
            onClick={() => {
              graph?.zoom(0.2);
              graph?.centerContent();
            }}
            className="outline-none cursor-pointer"
            width={16}
            height={16}
            fill={colors.gray[500]}
            name="zoom"
          />
        </div>
      </Tooltip>

      <Tooltip title="居中">
        <div>
          <CenterIcon
            onClick={() => graph?.centerContent()}
            className="outline-none cursor-pointer"
            width={18}
            height={18}
            fill={colors.gray[500]}
            name="center"
          />
        </div>
      </Tooltip>

      <Tooltip title="撤销">
        <div>
          <UndoIcon
            onClick={undo}
            width={18}
            height={18}
            className={[canUndo ? 'cursor-pointer' : '', 'outline-none']}
            fill={canUndo ? colors.gray[500] : colors.gray[300]}
            name="undo"
          />
        </div>
      </Tooltip>

      <Tooltip title="重做">
        <div>
          <RedoIcon
            onClick={redo}
            width={18}
            height={18}
            className={[canRedo ? 'cursor-pointer' : '', 'outline-none']}
            fill={canRedo ? colors.gray[500] : colors.gray[300]}
            name="redo"
          />
        </div>
      </Tooltip>

      <Tooltip title="清空设计">
        <div>
          <ClearIcon
            onClick={() => {
              graph?.clearCells();
              saveGraph();
            }}
            width={18}
            height={18}
            className={['cursor-pointer', 'outline-none']}
            fill={colors.gray[500]}
            name="clear"
          />
        </div>
      </Tooltip>
    </div>
  );
});
